<template>
	<view>
		<scroll-view scroll-y class="page">
			<!-- 头部logo-->
			<view class="UCenter-bg" :style="[{backgroundImage:'url(' + season + ')' }]">
				<image :src="person.avatar" round class="png animation-slide-right margin-bottom-sm" mode="widthFix" :style="[{animationDelay: '0.1s'}]"></image>
				<view class="text-xl animation-slide-left text-black" :style="[{animationDelay: '0.2s'}]">
					{{dept.departname}}
				</view>
				<image src="/static/wave.gif" mode="scaleToFill" class="gif-wave"></image>
			</view>
			<!-- 个人信息卡片-->
			<!-- <view class="cu-list menu-avatar">
		   	<view class="cu-item">
		   		<view class="cu-avatar round lg" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg);"></view>
		   		<view class="content flex-sub">
		   			<view class="text-grey">{{person.avatar}}</view>
		   			<view class="text-gray text-sm flex justify-between">
		   				经理
		   			</view>
		   		</view>
		   	</view>
		   </view> -->
			<view class="padding flex text-center text-grey bg-white shadow-warp">
				<view class="flex flex-sub flex-direction solid-right animation-slide-top" :style="[{animationDelay: '0.2s'}]">
					<view class="text-xl text-orange">{{person.realname}}</view>
					<view class="margin-top-sm"><text class="cuIcon-people"></text> 用户</view>
				</view>

				<view class="flex flex-sub flex-direction animation-slide-top" :style="[{animationDelay: '0.2s'}]">
					<view class="text-xl text-green">{{expert.approvedFlag=='0'?'专家':'农户'}}</view>
					<view class="margin-top-sm "><text class="cuIcon-news"></text> 类别</view>
				</view>
			</view>

			<!-- 	<view class=" bg-white grid col-3 padding-sm no-border margin-top-sm">
				<view class="animation-slide-bottom" :style="[{animationDelay: (index + 1)*0.1 + 's'}]" v-for="(item,index) in osList"
				 :key="index">
					<view class="radius text-center shadow-blur solid-right ">
						<view class="cu-avatar lg " :style="{background: 'url(' + item.icon + ') no-repeat',backgroundSize:'96upx 96upx'}">
							<view class="cu-tag badge">99</view>
						</view>
						<view class="text-df margin-top">{{item.title}}</view>
					</view>
				</view>
			</view> -->

			<!-- 列表list-->
			<view class="cu-list menu card-menu margin-top-xl margin-bottom-xl shadow-lg radius">
				<view class="cu-item arrow animation-slide-bottom" style="animationDelay:'0.1s'" @tap="goPage('nswd_my_list')">
					<view class="content">
						<text class="cuIcon-questionfill text-yellow text-xl"></text>
						<text class="text-grey">我的提问</text>
					</view>
				</view>
				<view class="cu-item arrow animation-slide-bottom" style="animationDelay: '0.3s" @tap="goPage('bhzd_my_list')">
					<view class="content">
						<text class="cuIcon-question text-red"></text>
						<text class="text-grey">我的问诊</text>
					</view>
				</view>
				<view class="cu-item arrow animation-slide-bottom" style="animationDelay: '0.5s'"  @tap="goPage('my_nssq_list')">
					<view class="content">
						<text class="cuIcon-footprint text-yellow"></text>
						<text class="text-grey">我的社区</text>
					</view>
				</view>
				<view class="cu-item arrow animation-slide-bottom" style="animationDelay: '0.7s'" @tap="goPage('zzda')">
					<view class="content">
						<text class="cuIcon-evaluate text-blue"></text>
						<text class="text-grey">我的种植档案</text>
					</view>
				</view>
				<view class="cu-item arrow animation-slide-bottom" style="animationDelay: '0.8s'" @tap="goPage('expert_certify')">
					<view class="content">
						<text class="cuIcon-evaluate text-blue"></text>
						<text class="text-grey">专家认证</text>
					</view>
					<view class="cu-tag line-red" v-if="expert.approvedFlag=='0'">
						已认证
					</view>
					<view class="cu-tag line-red" v-if="expert.approvedFlag=='1'">
						未通过
					</view>
					<view class="cu-tag line-red" v-if="expert.approvedFlag=='2'">
						未审核
					</view>
					<view class="cu-tag line-red" v-if="expert.approvedFlag=='3'">
						未认证
					</view>
				</view>
				<view class="cu-item arrow animation-slide-bottom" :style="[{animationDelay: '0.9s'}]">
					<navigator class="content" url="/pages/user/userdetail" hover-class="none">
						<text class="cuIcon-settingsfill text-cyan"></text>
						<text class="text-grey">设置</text>
					</navigator>
				</view>
				<view class="cu-item arrow animation-slide-bottom" :style="[{animationDelay: '1.0s'}]">
					<view class="content" @tap="logout">
						<text class="cuIcon-exit text-cyan"></text>
						<text class="text-grey">退出</text>
					</view>
				</view>
			</view>
			<view class="cu-tabbar-height"></view>
		</scroll-view>
	</view>
</template>

<script>
	import api from '@/api/api'
	import {
		mapActions
	} from "vuex"
	import {
		os
	} from '@/common/util/work.js'
	export default {
		name: "people",
		props: ["cur"],
		data() {
			return {
				season: "https://image.weilanwl.com/color2.0/index.jpg",
				jd: {
					1: '../../static/user/Spring.png',
					2: '../../static/user/Summer.png',
					3: '../../static/user/Fall.png',
					4: '../../static/user/Winter.png',
				},
				osList: os.data,
				person: {
					avatar: '',
					realname: '',
					username: '',
					post: '',
					departId: ''
				},
				dept: {
					id: '',
					deptname: ''
				},
				expert: {
					id: '',
					approvedFlag: '3'
				},
				departUrl: this.$config.apiUrl + "/appUserController/orgInfo",
				userUrl: this.$config.apiUrl + "/appUserController/queryById",
				expertUrl: this.$config.apiUrl + "/expertController/getExpertInfo",
				userId: '',
				id: ''
			};
		},
		watch: {
			cur: {
				immediate: true,
				deep: true,
				handler() {
					this.getUserInfo();
					this.changeSeason();
				},
			}
		},
		methods: {
			...mapActions(["Logout"]),
			getUserInfo: function() {
				this.$http.get(this.userUrl, {
					params: {
						id: this.$store.getters.userid
					}
				}).then(res => {
					//console.log("res",res)
					if (res.data.ok) {
						let result = res.data.data;
						let avatar = (result.portrait && result.portrait.length > 0) ? this.$config.imgUrl + '/' + result.portrait :
							'/static/avatar_boy.png'
						this.person.avatar = avatar
						this.person.realname = result.realName
						this.person.username = result.userName
						this.person.post = result.post
						this.person.departId = result.departid
						// console.log(this.person);
						this.getDeptInfo();
						this.getExpertInfo();
					}
				}).catch(err => {
					console.log(err);
				});
			},
			getDeptInfo: function() {
				this.$http.get(this.departUrl, {
					params: {
						id: this.person.departId
					}
				}).then(res => {
					if (res.data.ok) {
						let dept = res.data.data;
						this.dept = dept;
					}
				}).catch(err => {
					console.log(err);
				});
			},
			getExpertInfo: function() {
				this.$http.get(this.expertUrl, {
					params: {
						id: this.$store.getters.userid
					}
				}).then(res => {
					if (res.data.ok) {
						let expert = res.data.data;
						this.expert = expert;
					}
				}).catch(err => {
					console.log(err);
				});
			},
			logout() {
				let me = this;
				uni.showModal({
					title: '提示',
					content: '确定要退出登录？',
					success: function(res) {
						if (res.confirm) {
							//同步清理本地数据缓存。
							me.Logout().then((res) => {
								// console.log(res);
								me.$Router.replaceAll({
									name: 'login'
								})
							}).catch((err) => {

							}).finally(() => {

							})
						} else if (res.cancel) {
							//console.log('用户点击取消')
						}
					}
				})
			},
			goPage(page) {
				if (!page) {
					return false;
				} else if (page == 'expert_certify') {
					//已认证0 查看, 未通过1 编辑 ,未审核2 查看, 未认证3 编辑
					if (this.expert.approvedFlag == '0' || this.expert.approvedFlag == '2') {
						page = 'expert_certify_view'
					}

				}
				this.$Router.push({
					name: page,
					params: this.expert
				})
			},
			changeSeason: function() {
				Date.prototype.Format = function(fmt) {
					var o = {
						"M+": this.getMonth() + 1, // 月份
						"d+": this.getDate(), // 日
						"h+": this.getHours(), // 小时
						"m+": this.getMinutes(), // 分
						"s+": this.getSeconds(), // 秒
						"q+": Math.floor((this.getMonth() + 3) / 3), // 季度
						"S": this.getMilliseconds() // 毫秒
					};
					if (/(y+)/.test(fmt))
						fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
					for (var k in o)
						if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" +
							o[k]).substr(("" + o[k]).length)));
					return fmt;
				}
				var mytime = new Date().Format("q");
				if (mytime > 4 || mytime < 1) {
					this.season = 'https://image.weilanwl.com/color2.0/index.jpg'
				} else {
					this.season = this.jd[mytime]
				}
			}
		}
	}
</script>

<style>
	.UCenter-bg {
		background-size: cover;
		height: 550rpx;
		display: flex;
		justify-content: center;
		padding-top: 40rpx;
		overflow: hidden;
		position: relative;
		flex-direction: column;
		align-items: center;
		color: #fff;
		font-weight: 300;
		text-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
	}

	.UCenter-bg text {
		opacity: 0.8;
	}

	.UCenter-bg image {
		width: 200rpx;
		height: 200rpx;
	}

	.UCenter-bg .gif-wave {
		position: absolute;
		width: 100%;
		bottom: 0;
		left: 0;
		z-index: 99;
		mix-blend-mode: screen;
		height: 100rpx;
	}

	map,
	.mapBox {
		left: 0;
		z-index: 99;
		mix-blend-mode: screen;
		height: 100rpx;
	}

	map,
	.mapBox {
		width: 750rpx;
		height: 300rpx;
	}
</style>
